<template>
	<view class="search">

		<picker mode="selector" :range="cates" @change="catechange" range-key="name">
			<view class="qb">
				<text>{{type.name}}</text>
				<image src="@/static/down.png" mode=""></image>
			</view>
		</picker>
		<up-search shape="square" placeholder="搜索" :clearabled="true" :showAction='false' v-model="keyword"
			></up-search>
		<view class="btn" @click="search">搜索</view>
	</view>
	


	
	<block v-if="isSearch">
	     <view class="" style="padding-top: 30rpx;">
			 <homeList :list='list' :status="status" orgin='search'></homeList>
		 </view>
			

	</block>
	<block v-else>
		<view class="his">
			<text>历史搜索</text>
			<image src="@/static/del.png" mode="" @click="clear"></image>
		</view>
		<view class="hislist">
			<view v-for="(item,index) in hisList" :key="index" @click="()=>keyword=item">
				{{item}}
			</view>
		</view>
	</block>
   <view class="" style="height: 30rpx;"></view>


</template>

<script setup>
	import { articleArticleList } from "@/api/index.js"
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	let keyword = ref('')

	onReachBottom(() => {
		page.value++
		getList()
	})

    let isSearch=ref(false)
	
	let hisList = ref([])

    let type=ref(
	{
		name: '全部',
		id: ''
	})
	function catechange(e){
		type.value=cates.value[e.detail.value]
	}

	let cates = ref([
	{
		name: '全部',
		id: ''
	}, {
		name: '文化',
		id: 0
	}, {
		name: '新闻',
		id: 1
	}, {
		name: '公告',
		id: 2
	}, {
		name: '企业',
		id: 3
	}, {
		name: '成就',
		id: 4
	}, {
		name: '作品',
		id: 5
	}])


	onMounted(() => {
		hisList.value = uni.getStorageSync('hisList') || []
	})

	let status=ref('loadmore')
	
	let list = ref([])
	
	let page=ref(1)
	
	
	
	function getList() {
		
		let data = {
			search:keyword.value,
			type:type.value.id,
			pageSize: 10,
			pageNum: page.value,
		}
		status.value='loading'	
		articleArticleList(data).then(res => {
			uni.hideLoading()
			if (page.value == 1) {
				list.value = res.rows
				status.value='nomore'
			} else {
				if (res.rows.length == 0) {
					uni.showToast({
						title: "暂无更多数据~",
						icon: "none"
					})
					page.value--
					status.value='nomore'
					return
				} else {
					list.value = [...list.value, ...res.rows]
	                status.value='nomore'
				}
	
	
			}
		})
	
	}
	
	
	
	function search() {
		if (keyword.value) {
			hisList.value.push(keyword.value)
			hisList.value = Array.from(new Set(hisList.value))
			uni.setStorageSync('hisList', hisList.value)
			
		}
		uni.showLoading({
			mask:true
		})
		isSearch.value=true
		page.value=1
		list.value=[]
		getList()
	}

	function clear() {
		uni.showModal({
			title: "提示",
			content: '是否清除历史记录',
			success: (res) => {
				if (res.confirm) {
					hisList.value = []
					uni.removeStorageSync('hisList')
				}
			}
		})
	}

	function duihuan() {
		uni.showModal({
			title: "提示",
			content: '是否兑换此商品',
			success: (res) => {
				if (res.confirm) {

				}
			}
		})
	}

	function goinfo() {
		uni.navigateTo({
			url: "/pages/shop/detail"
		})
	}
</script>

<style>
	page {
		background: #fff
	}
</style>
<style lang="scss" scoped>
	.hislist {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;
		margin-top: 10rpx;

		view {
			padding: 0 20rpx;
			width: auto;
			margin-right: 20rpx;
			margin-top: 20rpx;
			line-height: 60rpx;
			height: 60rpx;
			background: #F5F5F5;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #3F3F3F;
		}
	}

	.search {
		width: 690rpx;
		margin-left: 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		padding-top: 20rpx;
		display: flex;

		.qb {
			display: flex;
			align-items: center;
			width: 160rpx;
			height: 64rpx;
			display: flex;
			align-items: center;


			image {
				width: 17rpx;
				height: 14rpx;
				margin-left: 10rpx;
			}

			text {

				font-size: 28rpx;
			}
		}

		.btn {
			width: 120rpx;
			height: 64rpx;
			background: #A9070C;
			border-radius: 10rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
			position: relative;
		}

	}

	.his {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;

		text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
		}

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}
</style>